<template>
    <div>
        <van-field
                readonly
                v-model="selected"
                :name="name"
                :required="required"
                :label="label"
                :placeholder="placeholder"
                :border="border"
                :rules="selectRule"
                @click="openSelection">
        </van-field>

        <div :id="containerId" style="width: 100%" class="multi-select-ty"></div>
        <van-popup v-model="show" bind:close="onClose" :get-container="getContainer">
            <van-nav-bar
                    title="多选"
                    @click-left="onClose"
                    @click-right="saveSelected"
                    left-arrow
                    left-text="返回"
                    right-text="确定">
            </van-nav-bar>
            <van-checkbox-group v-model="checkboxValue">
                <van-cell-group>
                    <van-cell v-for="(item, index) in selections" :key="index" clickable @click="toggle(index)">
                        <van-checkbox shape="square" slot="icon" :name="item.value" ref="checkboxes" />
                        <div style="padding-left: 0.5rem">{{ item.title }}</div>
                    </van-cell>
                </van-cell-group>
            </van-checkbox-group>
        </van-popup>
    </div>
</template>

<script>
  //下拉多选只支持 字典 不支持表

  import { getAction } from "@/api";

  export default {
    name: "AppMultiSelect",
    props:{
      display:{
        type:String,
        default:'inline-block',
        required:false
      },
      placeholder:{
        type:String,
        default:'请选择',
        required:false
      },
      label:{
        type:String,
        default:'',
        required:false
      },
      value:{
        type:String,
        required:false
      },
      border:{
        type:Boolean,
        default:false,
        required:false
      },
      dict:{
        type:Array,
        default:()=>[],
        required:false
      },
      dictCode:{
        type:String,
        default:'',
        required:false
      },
      name:{
        type:String,
        default:'',
        required:false
      },
      required:{
        type:Boolean,
        default:false,
        required:false
      }

    },
    data(){
      return {
        show:false,
        containerId:'',
        selected:'',
        selections:[],
        checkboxValue:[]

      }
    },
    watch:{
      value:{
        immediate:true,
        handler(val){
          if(!val){
            this.selected = ''
          }else{
            this.dict.map(item=>{
              if(item.value == val){
                this.selected = item.text;
              }
            })
          }
        }
      },
      dict:{
        deep:true,
        immediate:true,
        handler(val){
          if(val && val.length>0){
            this.selections = [...val];
            this.initContainerId();
          }
        }
      },
      dictCode:{
        handler(val){
          if(val && val.length>0){
            this.initContainerId();
            this.initSelections();
          }
        }
      }

    },
    computed:{
      selectRule(){
        if(this.required===true){
          return [{ required: true, message: `请选择${this.label}`}]
        }else{
          return [];
        }
      }
    },
    methods:{
      onClose(){
        this.show = false;
      },
      clearForm(){
        this.selected = '';
        this.checkboxValue = [];
      },
      initSelections(){
        getAction(`/sys/dict/getDictItems/${this.dictCode}`).then(res=>{
          if (res.success) {
            this.selections = res.result;
          }
        });
      },
      openSelection(){
        this.show = true
      },
      initContainerId(){
        this.containerId = 'msty'+new Date().getTime();
      },
      getContainer(){
        return document.getElementById(this.containerId)
      },
      toggle(index) {
        this.$refs.checkboxes[index].toggle();
      },
      saveSelected(){
        console.log('checkboxValue',this.checkboxValue)
        if(!this.checkboxValue || this.checkboxValue.length==0){
          this.$toast.fail('请至少选择一项!');
          return false;
        }
        this.initTextByCode(this.checkboxValue);
        this.$emit('change',this.checkboxValue.join(','))
        this.onClose();
      },
      initTextByCode(codeArray){
        let temp = []
        for(let c of codeArray){
          this.selections.map(item=>{
            if(item.value===c){
              temp.push(item.title)
            }
          });
        }
        this.selected = temp.join(',')
      }
    },
    model: {
      prop: 'value',
      event: 'change'
    }
  }
</script>

<style>
.multi-select-ty .van-popup{width:100%;height: 100%;}
</style>